<template>
  <Promised :promise="getRepaymentsAsync">
    <template v-slot:pending>
      <CardSkeleton title="借款详情" />
    </template>
    <template v-slot="data">
      <a-card class="card" title="借款详情" :bordered="false">
        <div class="loan-details-container">
          <a-descriptions title="">
            <a-descriptions-item label="申请时间">{{ loanDetails.create_time }}</a-descriptions-item>
            <a-descriptions-item label="借款金额">$ {{ loanDetails.borrow_money }}</a-descriptions-item>
            <a-descriptions-item label="手续费">$ {{ loanDetails.poundage }}</a-descriptions-item>：
            <a-descriptions-item label="利息比例">{{ loanDetails.interest }}</a-descriptions-item>
            <a-descriptions-item label="滞纳金比例">{{ loanDetails.delay_payment }} %</a-descriptions-item>：
            <a-descriptions-item label="借款总期限">{{ loanDetails.delay_payment }}天</a-descriptions-item>
            <a-descriptions-item label="借贷卡">1234567890</a-descriptions-item>
            <a-descriptions-item label="借款状态">{{ loanDetails.status | status }}</a-descriptions-item>
            <a-descriptions-item label="还款状态">{{ loanDetails.re_status | reStatus }}</a-descriptions-item>
          </a-descriptions>
          <RepaymentTable :data="loanDetails.repayments" />
        </div>
      </a-card>
    </template>
  </Promised>
</template>

<script>
import RepaymentTable from '../table/Repayment.vue'
import props from '../props'
import { getRepayments } from '@/api/risk/user'

export default {
  mixins: [props],

  data () {
    return {
      getRepaymentsAsync: null,
    }
  },

  filters: {
    status (value) {
      switch (value) {
        case 1:
          return '审核拒绝'

        case 2:
          return '审核通过'

        case 3:
          return '审核中'

        case 4:
          return '已拨款'

        case 5:
          return '拨款失败'

        default:
          return '/'
      }
    },

    reStatus (value) {
      switch (value) {
        case 0:
          return '待还'

        case 1:
          return '已还'

        case 2:
          return '逾期'

        default:
          return '/'
      }
    },
  },

  components: {
    RepaymentTable,
  },

  created () {
    this.getRepaymentsAsync = this.getRepayments(this.tid)
  },

  methods: {
    getRepayments () {
      return new Promise((resolve, reject) => {
        getRepayments(this.tid)
          .then(data => {
            resolve(data)
          })
          .catch(error => {
            reject(error)
          })
      })
    },
  },
}
</script>
